<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 页面响应式，具体在demo.css中实现 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 页面响应式 -->
    <title>我的主页</title>
    <link type="text/css" rel="stylesheet" href="css/style-nav&foot.css" />
    <script src="js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="js/js-nav&foot.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


    <!-- search页面 -->
    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Righteous" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="css/phone-menu-styles.css" />
    <link rel="stylesheet" type="text/css" href="css/demo-search.css" />
    <link rel="stylesheet" type="text/css" href="css/react-head&foot.css" />
    <link rel="stylesheet" type="text/css" href="css/style-search.css" />
    <link rel="stylesheet" type="text/css" href="css/myHomepage/myHomepage.css" />
    <link href="css/ui-choose.css" rel="stylesheet" />
    <!-- demo必须在style-search的上面 -->
    <script>
        document.documentElement.className = 'js';
    </script>
    <!-- search页面 -->

</head>

<body class="phone-body">
    <!-- search页面 -->
    <svg class="hidden">
        <defs>
            <symbol id="icon-search" viewBox="0 0 24 24">
                <title>search</title>
                <path
                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
            </symbol>
            <symbol id="icon-cross" viewBox="0 0 24 24">
                <title>cross</title>
                <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </symbol>
        </defs>
    </svg>

    <!-- <div id="welcome">
        

    </div>     -->

                    <!-- //上传头像 -->
                    <div id="upavatar">
                            <div id="upMusicOut">×</div>
                            <h3 id="tips">现在，您可以轻松更换您的社交头像。</h3>
                            选择头像：<input type="file" id="select-cover" name="file" accept="image/*">
                            <button id="confirm-up">确认上传头像</button>
                            <div id="up-cover-image">
                                <img src="" id="up-cover">
                            </div>
                    </div>

    <!-- 这个是主页，相当于body，请把页面中所有内容写到这里来 -->
    <main class="main-wrap">


        <!--头-->
        <div id="head">
            <header class="codrops-header" id="codrops-header">
                <div class="search-wrap">
                    <button id="btn-search" class="btn btn--search"><svg class="icon icon--search">
                            <use xlink:href="#icon-search"></use>
                        </svg></button>
                </div>
            </header>
            <div id="logo">
                <div id="slogen"><img src="img/LOGO/slogen.png" width="50%"></div>
                <div id="cd"></div>
                <div id="needle"><img src="img/LOGO/zhen.png" width="50%"></div>
                <div id="name"><img src="img/LOGO/name.png" width="50%"></div>
            </div>
            <ul id="nav">
                <div class="one-nav">
                    <li class="current-nav"><a href="http://localhost:8066/Music_forum/login-regist-writeText/home.html" id="current-a" class="nav">HOME<div class="wee grad"></div></a>
                    </li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/rankingList.html">排行榜</a></li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/discuss.html">乐评</a></li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/Shop.html">唱片小店</a></li>
                </div>
            </ul>
            <ul id="login">
                <li src="" id="in" class="login"><a href="http://localhost:8066/Music_forum/login-regist-writeText/enter.html">Sign In</a></li>
                <!-- 登录 -->
                <li src="" id="up" class="login"><a href="http://localhost:8066/Music_forum/login-regist-writeText/login.html">Sign Up</a></li>
                <!-- 注册 -->
            </ul>

            <div class="loginOn">
                <div id="loginOn-avatar"><img src="img/article/avatar-default.jpg" width="100%" height="100%" id="userimg"></div>
                <div id="loginOn-name">小明_111</div>
            </div>




            <nav class="phone-nav">
                <ul>
                    <li><a href="#http://localhost:8066/Music_forum/login-regist-writeText/home.html">HOME</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/rankingList.html">排行榜</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/discuss.html">乐 评</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/Shop.html">唱片店</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/enter.html">- 登录</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/login.html">- 注册</a></li>
                </ul>
            </nav>
            <div class="nav-toggle">
                <div class="icon"></div>
            </div>
        </div>

        <div id="main-content">
            <div id="avatarBack">
                <div id="avatar">
                    <div id="addfans-box">
                        <img src="./img/加.png" alt="加粉丝" id="addfans">
                        <img src="./img/对勾小.png" alt="减粉丝" id="defans">
                    </div>
                </div>

                <script>
                var oAvatar=document.getElementById('avatarBack');
                var ofans=document.getElementById('addfans-box')
                var oAddfans=document.getElementById('addfans')
                var odefans=document.getElementById('defans')
                ofans.onclick=oAvatar.onmouseover=oAvatar.onclick=function(){
                    ofans.style.top="80%"
                    ofans.style.opacity='1';
                }
                oAvatar.onmouseout=function(){
                    ofans.style.top="60%"
                    ofans.style.opacity='0';
                }
                //  ofans.onclick=function(){
                //      oAddfans.style.top='-50px';
                //      odefans.style.top='0px';
                // }
                </script>
                <p id="username">Alice</p>
                <!-- <div id="fans">粉丝：19 关注：180</div> -->
            </div>

            <div id="myDetail">
                <div id="myArt">
                    <div class="myTitle">我的创作</div>
                    <div class="more" id="morearts">更多</div>
                    <div class="arts">


                    </div>
                </div>
                <div id="myCollection">
                    <div class="myTitle">我的收藏</div>
                    <div class="more" id="morecollections">更多</div>
                    <div class="collections" id="collections">

                    </div>
                </div>

                <button id="out">登出账号</button>
            </div>



        </div>


        <!--尾-->
        <div id="foot">
            <div class="foot-txt">
                <div id="foot-logo"><img src="img/LOGO/logo-foot.jpg" width="200px"></div>
                <br><br>关于我们 | 联系我们 | 服务条款 | 隐私政策<br /><br>Copyright © 515lab & 515music. All Rights Reserved.<div>
                    circleChen Darius xiaotaoLi zheyuanLi</div>

            </div>
        </div>
    </main>

    <div class="search">
        <button id="btn-search-close" class="btn btn--search-close" aria-label="Close search form"><svg
                class="icon icon--cross">
                <use xlink:href="#icon-cross"></use>
            </svg></button>
        <form class="search__form" action=""  onsubmit="return false">
            <input class="search__input" name="search" type="search" placeholder="Search" autocomplete="off"
                autocorrect="off" autocapitalize="off" spellcheck="false" />
            <span class="search__info">Hey！需要一些推荐吗？</span>

            <div id="recommend">

                <div class="recommends">邓紫棋</div>
                <div class="recommends">国语流行</div>
                <div class="recommends">摇滚</div>
            </div>
        </form>
    </div>
    <!-- search页面 -->



    <script src="js/demo-search.js"></script>
    <script src="js/ui-choose.js"></script>
    <script src="js/myHomepage/myHomepage.js"></script>
</body>

</html>